<template>
  <div id="app">
    <div class="title">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
		<el-breadcrumb-item :to="{ path: '/alarmsettings' }">报警设置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <br/>
<hr />
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item>报警消息</el-breadcrumb-item>
    </el-breadcrumb>

    <el-input v-model.trim="searchKey" placeholder="请输入关键字搜索" class="input-search"></el-input>
	

    <el-table :data="filteredTableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%">
      <el-table-column label="序号" width="80">
        <template slot-scope="scope">{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column label="充电桩名称" prop="name"></el-table-column>
      <el-table-column label="归属充电站" prop="chargingStation"></el-table-column>
      <el-table-column label="报警类型" prop="type"></el-table-column>
      <el-table-column label="等级程度" prop="level"></el-table-column>
      <el-table-column label="报警时间" prop="time"></el-table-column>
      <el-table-column label="警报详情" prop="details"></el-table-column>
      <el-table-column label="状态" prop="status"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="handleView(scope.row)">查看</el-button>
          <el-button type="text" @click="handleStartTask(scope.row)">发起任务</el-button>
          <el-button type="text" @click="handleCancel(scope.row)">取消</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :current-page.sync="currentPage"
      :total="filteredTableData.length"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKey: "",
      tableData: [
        { id: 1, name: '充电桩A', chargingStation: '充电站1', type: '过载', level: '严重', time: '2024-09-24 10:00:00', details: '电流超过额定值', status: '未处理' },
        { id: 2, name: '充电桩B', chargingStation: '充电站2', type: '短路', level: '紧急', time: '2024-09-24 12:30:00', details: '检测到短路故障', status: '已处理' },
        { id: 3, name: '充电桩C', chargingStation: '充电站3', type: '断电', level: '一般', time: '2024-09-24 15:45:00', details: '电源中断', status: '未处理' },
        { id: 4, name: '充电桩D', chargingStation: '充电站1', type: '温度过高', level: '警告', time: '2024-09-24 17:20:00', details: '温度传感器检测到高温', status: '处理中' }
      ],
      filteredTableData: [],
      currentPage: 1,
      pageSize: 2, // 每页显示两条数据
    };
  },
  created() {
    this.filteredTableData = [...this.tableData];
  },
  methods: {
    handleView(row) {
      console.log("查看", row);
    },
    handleStartTask(row) {
      console.log("发起任务", row);
    },
    handleCancel(row) {
      console.log("取消", row);
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    filterTableData() {
      if (!this.searchKey) {
        this.filteredTableData = [...this.tableData];
      } else {
        this.filteredTableData = this.tableData.filter(row =>
          row.name.includes(this.searchKey) ||
          row.chargingStation.includes(this.searchKey) ||
          row.type.includes(this.searchKey) ||
          row.level.includes(this.searchKey) ||
          row.time.includes(this.searchKey) ||
          row.details.includes(this.searchKey) ||
          row.status.includes(this.searchKey)
        );
      }
      // 当数据过滤后重新设置当前页为第一页
      this.currentPage = 1;
    }
  },
  watch: {
    searchKey: {
      handler: 'filterTableData',
      immediate: true
    }
  }
};
</script>

<style scoped>
.breadcrumb {
  margin-bottom: 16px;
}

.input-search {
  width: 200px;
  float: right;
}
</style>